<template>
  <div class="settings-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本设置" name="basic">
        <el-form :model="basicSettings" label-width="120px">
          <el-form-item label="图书馆名称">
            <el-input v-model="basicSettings.libraryName" />
          </el-form-item>
          <el-form-item label="最大借阅数量">
            <el-input-number v-model="basicSettings.maxBorrow" :min="1" :max="20" />
          </el-form-item>
          <el-form-item label="借阅期限(天)">
            <el-input-number v-model="basicSettings.borrowDays" :min="1" :max="60" />
          </el-form-item>
          <el-form-item label="超期罚金(元/天)">
            <el-input-number v-model="basicSettings.overdueFee" :min="0" :precision="2" :step="0.1" />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="权限管理" name="permissions">
        <el-table :data="userPermissions" style="width: 100%">
          <el-table-column prop="role" label="角色" width="150" />
          <el-table-column prop="description" label="描述" width="200" />
          <el-table-column label="权限">
            <template #default="scope">
              <el-checkbox-group v-model="scope.row.permissions">
                <el-checkbox label="books">图书管理</el-checkbox>
                <el-checkbox label="readers">读者管理</el-checkbox>
                <el-checkbox label="borrow">借阅管理</el-checkbox>
                <el-checkbox label="statistics">统计报表</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div class="actions">
      <el-button type="primary">保存设置</el-button>
      <el-button>重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('basic');

const basicSettings = ref({
  libraryName: '',
  maxBorrow: 5,
  borrowDays: 30,
  overdueFee: 0.5
});

const userPermissions = ref([
  {
    role: '管理员',
    description: '系统管理员',
    permissions: ['books', 'readers', 'borrow', 'statistics']
  },
  {
    role: '图书管理员',
    description: '图书管理员',
    permissions: ['books', 'borrow']
  }
]);
</script>

<style scoped>
.settings-container {
  padding: 20px;
  background: #fff;
}
.actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
</style>
